<template>
  <div class="tool">
    <el-tooltip class="item" effect="dark" content="添加地标" placement="top">
      <div class="item" @click="draw('point')" :class="{ 'active': drawTool == 'point' }">
        <i class="iconfont icon-dingweixiao"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="绘制线条" placement="top">
      <div class="item" @click="draw('line')" :class="{ 'active': drawTool == 'line' }">
        <i class="iconfont icon-icon-line-graph"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="绘制形状" placement="top">
      <div class="item" @click="draw('polygon')" :class="{ 'active': drawTool == 'polygon' }">
        <i class="iconfont icon-xingzhuang-juxing"></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import db from "../../utils/localstorage";
import { isEmptyObject } from "../../utils/tools";

export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState("leftMenu", ["drawTool"]),
  },
  watch: {
    drawTool(newVal) {
      let values = ["point", "line", "polygon"];
      if (newVal && !values.includes(newVal)) {
        earth.drawManager.remove();
      }
    }
  },
  methods: {
    ...mapMutations("leftMenu", ["changeTool"]),
    draw(type) {
      if (this.drawTool == type) {
        this.changeTool("");
        earth.drawManager.remove();
        return;
      }
      this.changeTool(type);
      switch (type) {
        case "point":
          this.drawPoint();
          break;
        case "line":
          this.drawLine();
          break;
        case "polygon":
          this.drawPolygon();
          break;
        default:
          break;
      }
    },
    drawPoint() {
      console.log("drawPoint");
      let me = this;
      earth.drawManager.drawPoint((positions, entities) => {
        me.changeTool("");
        let _entitys = entities.map((entity) => {
          let _clone = Cesium.clone(entity);
          return _clone;
        });
        setTimeout(() => {
          me.$prompt("请输入标题", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            closeOnPressEscape: false,
          })
            .then(({ value }) => {
              let points = positions.map((position, index) => {
                return turf.point(
                  [Number(position.lng), Number(position.lat)],
                  {
                    id: entities[entities.length - 1 - index].id,
                    name: value,
                    height: Number(position.alt.toFixed(2)),
                  }
                );
              });

              let cacheData = db.get("cacheData");
              if (isEmptyObject(cacheData)) {
                cacheData = [...points];
              } else {
                cacheData.push(...points);
              }
              db.save("cacheData", cacheData);

              earth.drawManager.remove();
              _entitys.map((e) => {
                e.label.text = value;
                viewer.entities.add(e);
              });
              points = points.concat(_entitys);
            })
            .catch(() => {
              earth.drawManager.remove();
            });
        }, 0);
      });
    },
    drawLine() {
      let me = this;
      console.log("drawLine");
      viewer.scene.globe.depthTestAgainstTerrain = false;
      viewer.scene.postProcessStages.fxaa.enabled = true;
      earth.drawManager.drawLine((positions, entities) => {
        me.changeTool("");
        let _entitys = entities.map((entity) => {
          let _clone = Cesium.clone(entity);
          return _clone;
        });
        setTimeout(() => {
          me.$prompt("请输入标题", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            closeOnPressEscape: false,
          })
            .then(({ value }) => {
              let points = positions.map((position) => {
                return [Number(position.lng), Number(position.lat)];
              });
              let _enity = entities[entities.length - 1];
              var lineString = turf.lineString(points, {
                id: _enity.id,
                name: value,
              });

              let cacheData = db.get("cacheData");
              if (isEmptyObject(cacheData)) {
                cacheData = [lineString];
              } else {
                cacheData.push(lineString);
              }
              db.save("cacheData", cacheData);

              earth.drawManager.remove();
              _entitys.map((e) => {
                viewer.entities.add(e);
              });
              lines = lines.concat(_entitys);
            })
            .catch(() => {
              earth.drawManager.remove();
            });
        }, 0);
      });
    },
    drawPolygon() {
      console.log("drawPolygon");
      let me = this;
      viewer.scene.globe.depthTestAgainstTerrain = false;
      viewer.scene.postProcessStages.fxaa.enabled = true;

      earth.drawManager.drawPolygon((positions, entities) => {
        me.changeTool("");

        setTimeout(() => {
          me.$prompt("请输入标题", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            closeOnPressEscape: false,
          })
            .then(({ value }) => {
              let points = positions.map((position) => {
                return [Number(position.lng), Number(position.lat)];
              });
              points.push(points[0]);
              let _enity = entities[entities.length - 1];
              var polygon = turf.polygon([points], {
                id: _enity.id,
                name: value,
              });

              let cacheData = db.get("cacheData");

              if (isEmptyObject(cacheData)) {
                cacheData = [polygon];
              } else {
                cacheData.push(polygon);
              }
              db.save("cacheData", cacheData);

              let _entitys = entities.map((entity, index) => {
                let _clone = Cesium.clone(entity);
                return _clone;
              });
              earth.drawManager.remove();
              _entitys.map((e) => {
                viewer.entities.add(e);
              });
              polygons = polygons.concat(_entitys);
            })
            .catch(() => { });
        }, 0);
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>